<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.js"></script>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
	
	<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
	<link href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" rel="stylesheet">
	<style type="text/css">
		.all,.main_div{
			padding: 1px 10px 1px 10px;
		}
		.div_header{
			text-align: center;
			font-weight: bold;
			font-size: 40px;
			border-bottom: 1px solid;
			padding-bottom: 10px;
			padding-top: 10px;
		}
		#f4{
			font-size: 33px;
			font-weight: 500;
			text-align: center;
			margin: 8px 0px 8px 0px;
			padding-top: 10px;
			padding-bottom: 10px;
			border-bottom: 1px solid;
		}
		#div_content1 > div{
			height: 350px;
		}
		.css_charts{
			width: 100%;
			height: 100%;
		}
		#cronDesc > div{
			padding-top: 5px;
			padding-bottom: 5px;
			font-size: 14px;
		}
		.risk_circle{
			line-height: 80px;
			font-size: 25px;
			text-align: center; 
			width: 80px;
			height: 80px;
			border-radius:50%;
			border: 1px solid rgb(0, 0, 0);
		}
		.rish_circle_num{
			font-size: 22px;
		}
	</style>
</head>
<body>
	<div id="el" class="all">
		<div class="div_header">
			<span>工程项目全流程监督</span>
		</div>
		<div class="div_main">
			<!-- 统计4 -->
			<div id="f4" class="main_div row">
				<div class="col-md-3"><span>在建项目数量&nbsp;&nbsp;{{titleData.project_num}}</span></div>
				<div class="col-md-3"><span>预警次数&nbsp;&nbsp;{{titleData.warn_num}}</span></div>
				<div class="col-md-3"><span>督办次数&nbsp;&nbsp;{{titleData.tip_num}}</span></div>
				<div class="col-md-3"><span>风险要件数量&nbsp;&nbsp;{{titleData.risk_num}}</span></div>
			</div>
			<div id="div_content1" class="main_div">
				<div class="col-md-4">
					<div id="chart1" class="css_charts">
						
					</div>
				</div>
				<div class="col-md-4" style="border-left: 1px solid;border-right: 1px solid;">
					<div id="chart2" class="css_charts" style="height: 250px;">
					
					</div>
					<div id="cronDesc">
						<div class="col-md-6">
							<div class="col-md-6">
								<span>当日完成</span>
							</div>
							<div class="col-md-6">
								<span>{{cronDesc.one_day_num}}个</span>
							</div>
						</div>
						<div class="col-md-6">
							<div class="col-md-6">
								<span>2日内完成</span>
							</div>
							<div class="col-md-6">
								<span>{{cronDesc.two_day_num}}个</span>
							</div>
						</div>
						<div class="col-md-6">
							<div class="col-md-6">
								<span>3日内完成</span>
							</div>
							<div class="col-md-6">
								<span>{{cronDesc.three_day_num}}个</span>
							</div>
						</div>
						<div class="col-md-6">
							<div class="col-md-6">
								<span>其它</span>
							</div>
							<div class="col-md-6">
								<span>{{cronDesc.other_num}}个</span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div id="chart3" class="css_charts">
						<div><span style="font-weight: 900;font-size: 18px;">风险要件统计</span></div>
						<div style="height: 95%;">
							<div class="col-md-4" style="text-align: right;">
								<div class="risk_circle" style="display:inline-block;">
									<span>高</span>
								</div>
								<div class="rish_circle_num" style="width: 80px;float: right;text-align: center;">
									{{queryMvpItemCount.high_num}}
								</div>
							</div>
							<div class="col-md-4" style="text-align: center;">
								<div class="risk_circle" style="display:inline-block;" >
									<span>中</span>
								</div>
								<div class="rish_circle_num">
									{{queryMvpItemCount.middle_num}}
								</div>
							</div>
							<div class="col-md-4" style="text-align: left;">
								<div class="risk_circle" style="display:inline-block;">
									<span>低</span>
								</div>
								<div class="rish_circle_num" style="width: 80px;float: left;text-align: center;">
									{{queryMvpItemCount.low_num}}
								</div>
							</div>
							
							<div style="margin-top: 15px;">
								<div class="row" style="font-size: 20px;"
								v-for="item in queryMvpItemList" :key="item.item_id">
    								<div class="col-md-8" style="padding-left: 30px;height: 40px;">
    									{{ item.item_name }}
    								</div>
    								<div class="col-md-4" style="padding-right: 15px;height: 40px;">
    									{{ item.num }}
    								</div>
    								
  								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="div_content2" class="main_div">
			&nbsp;
				<div id="projectList" style="width: 100%;">
					
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var app = new Vue({
	  	el: '#el',
	  	data: {
	    	titleData: {
	    		project_num: null,
	    		warn_num: null,
	    		tip_num: null,
	    		risk_num: null
	    	},
	    	cronDesc: {
	    		one_day_num: null,
	    		two_day_num: null,
	    		three_day_num: null,
	    		other_num: null
	    	},
	    	queryMvpItemCount: {
	    		high_num: null,
	    		middle_num: null,
	    		low_num: null
	    	},
	    	queryMvpItemList: []
	  	},
	  	methods: {
			queryTitle: function(){
				//alert(111);
				var self = this;
				jQuery.ajax({
					url: '[[@{/}]]rest/rptBigScreen/queryTitle',
					async: true,
					dataType: 'json',
					type: 'get',
					data:{
						
					},
					success: function(res){
						//console.log(res);
						self.titleData = res.data;
					}
				});
			},
			queryTipBar: function(){
				var self = this;
				jQuery.ajax({
					url: '[[@{/}]]rest/rptBigScreen/queryTipBar',
					async: true,
					dataType: 'json',
					type: 'get',
					data:{
						
					},
					success: function(res){
						//console.log(res);
						self.renderTipBar(res.data);
						//self.titleData = res.data;
					}
				});
			},
			queryCronPie: function(){
				var self = this;
				jQuery.ajax({
					url: '[[@{/}]]rest/rptBigScreen/queryCronPie',
					async: true,
					dataType: 'json',
					type: 'get',
					data:{
						
					},
					success: function(res){
						//console.log(res);
						self.renderCronPie(res.data);
						//self.titleData = res.data;
					}
				});
			},
			queryMvpItem: function(){
				var self = this;
				jQuery.ajax({
					url: '[[@{/}]]rest/rptBigScreen/queryMvpItem',
					async: true,
					dataType: 'json',
					type: 'get',
					data:{
						
					},
					success: function(res){
						console.log(res);
						var data = res.data;
						self.queryMvpItemCount = data.queryMvpItemCount;
						self.queryMvpItemList = data.queryMvpItemList;
						if(!self.queryMvpItemList || self.queryMvpItemList.length == 0){
							//test
							self.queryMvpItemList = [
								{item_name: 'name1', num: 6},
								{item_name: 'name2', num: 2},
								{item_name: 'name3', num: 2},
								{item_name: 'name4', num: 2},
								{item_name: 'name5', num: 2},
							];
						}
					}
				});
			},
			queryProjectList: function(){
				layui.use('table', function(){
				  var table = layui.table;
				  
				  var xh= $(window).height() -($("#projectList").height()+$("#projectList").offset().top-$(document).scrollTop());
				  table.render({
				    elem: '#projectList'
				    ,url: '[[@{/}]]rest/rptBigScreen/queryProjectList'
				    ,cellMinWidth: 80 
				    ,height: xh - 20
				    ,cols: [ [
				      {field:'idx', width:80, title: '序号', sort: true}
				      ,{field:'project_name', width:200, title: '项目名称'}
				      ,{field:'start_time', width:200, title: '启动时间', sort: true}
				      ,{field:'app_phase_desc', width:80, title: '当前阶段'}
				      ,{field:'all_task_num', title: '任务总数', width: '8%', minWidth: 100} 
				      ,{field:'done_num', width:80,title: '已完成', sort: true}
				      ,{field:'undone_num', width:80,title: '未完成', sort: true}
				      
				      ,{field:'all_warn_num', title: '预警次数'}
				      ,{field:'warn1_num', width:137, title: '一次预警次数', sort: true}
				      
				      ,{field:'warn2_num', width:137, title: '二次预警次数', sort: true}
				      ,{field:'tip_num', width:137, title: '督办次数', sort: true}
				      ,{field:'fk_num', width:137, title: '反馈次数', sort: true}
				      ,{field:'fk_per', width:137, title: '反馈率', sort: true}
				      ,{field:'risk_num', width:137, title: '风险要件数量', sort: true}
				      ,{field:'high_risk_num', width:137, title: '高风险', sort: true}
				      ,{field:'middle_risk_num', width:137, title: '中风险', sort: true}
				      ,{field:'low_risk_num', width:137, title: '低风险', sort: true}
				    ] ]
				  });
				  
			      
				});
				
				console.log($(".layui-table-body").length);
				$(".layui-table-body").css(
			          "height", "400px"
			        );
			}
			
			
			,renderTipBar: function(data){
				var myChart = echarts.init(document.getElementById('chart1'));
				var xarr = [];
				var dbList = [];
				var fkList = [];
				if(data && data.length != 0){
					for(let i = 0; i < data.length; i++){
						xarr.push(data[i].project_name);
						dbList.push(data[i].tip_num);
						fkList.push(data[i].fk_num);
					}
				}
				option = {
				    title: {
				        text: '任务督办统计',
				        subtext: ''
				    },
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'shadow'
				        }
				    },
				    legend: {
				        data: ['督办', '反馈']
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis: {
				        type: 'value',
				        boundaryGap: [0, 0.01]
				    },
				    yAxis: {
				        type: 'category',
				        data: xarr//['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
				    },
				    series: [
				        {
				            name: '督办',
				            type: 'bar',
				            barWidth : 18,
				            data: dbList//[18203, 23489, 29034, 104970, 131744, 630230]
				        },
				        {
				            name: '反馈',
				            type: 'bar',
				            barWidth : 18,
				            data: fkList//[19325, 23438, 31000, 121594, 134141, 681807]
				        }
				    ]
				};
				myChart.setOption(option);
			}
			,renderCronPie: function(data){
				var self = this;
				var myChart = echarts.init(document.getElementById('chart2'));
				
				var warn1_num = data.warn1_num;
				var warn2_num = data.warn2_num;
				var one_day_num = data.one_day_num;
				var two_day_num = data.two_day_num;
				var three_day_num = data.three_day_num;
				var other_num = data.other_num;
				
				self.cronDesc.one_day_num = one_day_num;
				self.cronDesc.two_day_num = two_day_num;
				self.cronDesc.three_day_num = three_day_num;
				self.cronDesc.other_num = other_num;
				
				var ser = [
					{value: warn1_num, name: "一次预警"},
					{value: warn2_num, name: "二次预警"}
				];
				
				option = {
					    title: {
					        text: '任务预警统计',
					        subtext: '',
					        left: 'left'
					    },
					    tooltip: {
					        trigger: 'item',
					        formatter: '{a} <br/>{b} : {c} ({d}%)'
					    },
					    //legend: {
					    //    orient: 'vertical',
					    //    left: 'left',
					    //    data: ['一次预警', '二次预警'],
					    //    normal: {show: false},
					    //    selected: {
					    //    	'一次预警': true,
					    //    	'二次预警': true
					    //    }
					    //},
					    series: [
					        {
					            name: '',
					            type: 'pie',
					            radius: '55%',
					            center: ['50%', '60%'],
					            data: ser,
					            emphasis: {
					                itemStyle: {
					                    shadowBlur: 10,
					                    shadowOffsetX: 0,
					                    shadowColor: 'rgba(0, 0, 0, 0.5)'
					                }
					            }
					        }
					    ]
					};
				
				myChart.setOption(option);
			}
		  
	  	},
	  	mounted: function(){
	  		
	  		
		  	this.queryTitle();
		  	this.queryTipBar();
		  	this.queryCronPie();
		  	this.queryMvpItem();
		  	this.queryProjectList();
	  	}
	})
</script>
</html>